<template>
  <div class="home  d-flex flex-column my-container">
    <!--    <div class="title-container" v-if="permersion.search">-->
    <!--      <div class="search-content">-->
    <!--        <el-form :model="searchModel" :inline="true">-->
    <!--          <el-form-item>-->
    <!--            <el-input v-model="searchModel.deviceName" placeholder="请输入设备名称" prefix-icon="el-icon-search"/>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item>-->
    <!--            <el-input v-model="searchModel.deviceCode" placeholder="请输入设备编码" prefix-icon="el-icon-search"/>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item>-->
    <!--            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="">
        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
            <el-button type="primary" v-permission="'TPT_CSH'" @click="openDialog">拓扑图初始化</el-button>
          </el-form-item>
<!--          <el-form-item class="float-right">-->
<!--            <el-button type="primary" @click="toManualSetUp">手动设置</el-button>-->
<!--            <el-button type="primary" @click="toManualSetUp2">手动设置1.24</el-button>-->
<!--          </el-form-item>-->
        </el-form>
      </div>
      <div class="col d-flex over-auto">
        <el-table v-loading="tableLoading" border :data="tableData" height="100%" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="deviceType" label="初始化状态" align="center">
            <template slot-scope="{row}">
              <el-tag :type="row.status == 'ing' ? '' : row.status == 'over' ? 'success' : 'danger'">
                {{row.status == "ing" ? "处理中" : row.status == "over" ? "成功" : "失败"}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="初始化时间" align="center">
            <template slot-scope="{row}">
              {{ row.createTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template #default="{ row }">
              <el-button type="primary" size="mini" :disabled="row.status != 'over'" @click="handleDetail(row)">详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
                  @pagination="pagination"/>
    </div>

    <!-- 弹框 -->
    <yc-dialog ref="ycDialog" :dialogTitle="dialogTitle" :centerTitle="centerTitle">
      <template #content>
        <div class="dialog-content">
          <el-form ref="loginFormRef" :rules="rules" :model="newAccountModel" label-width="90px">
            <el-form-item label="用户名称" prop="userName">

            </el-form-item>
            <el-form-item label="手机号码" prop="accountPhone">

            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import { queryDeviceGradeInitMainPage, addDeviceGradeInit } from "@/api/showManage/index"

  export default {
    components: {
      ycDialog
    },
    data() {
      return {
        searchModel: {
          deviceName: "",
          deviceCode: ""
        },
        tableData: [],
        page: {
          pageSize: 10,
          pageIndex: 1
        },
        count: 0,

        statusList: [
          { id: "ing", name: "处理中", type: "" },
          { id: "over", name: "成功", type: "success" },
          { id: "fail", name: "失败", type: "danger" }
        ],
        tableLoading: false,
        centerTitle: "",
        dialogTitle: "",
        newAccountModel: {
          userName: "",
          roleName: "",
          accountPhone: "",
          id: 0,
          roleCode: ""
        },
        rules: {
          userName: [{
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }],
          roleCode: [{
            required: true,
            message: "请选择角色",
            trigger: "change"
          }],
          accountPhone: [{
            required: true,
            trigger: "blur",
            message: "请输入手机号码"
          }]
        }
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      this.getTableList()
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      async getTableList() {
        this.tableLoading = true
        const { deviceName, deviceCode } = this.searchModel
        const { status, success, object, message } = await queryDeviceGradeInitMainPage({
          ...this.page,
          deviceName,
          deviceCode
        })
        if (status == 200) {
          this.tableLoading = false
          this.tableData = object.data
          this.count = object.count
        }
      },
      pagination(pageItem) {
        // pageItem.page, pageItem.limit
        this.page.pageIndex = pageItem.page
        this.page.pageSize = pageItem.limit
        this.getTableList()
      },
      handleDetail(row) {
        this.$router.push({
          path: "/showManage/realTimeLoadDetail",
          query: {
            initCode: row.initCode
          }
        })
      },
      searchClick() {
        this.getTableList()
      },
      openDialog() {
        // this.dialogTitle = "拓扑图初始化"
        // this.centerTitle = "拓扑图初始化"
        this.addDeviceGradeInit()
        // this.$refs.ycDialog.dialogVisible = true
      },
      async addDeviceGradeInit() {
        const { status, success, object, message } = await addDeviceGradeInit()
        if (status == "200") {
          // this.list = object.data
          // this.count = object.count
          this.$message.success(message)
          this.getTableList()
        }
      },
      dialogSave() {
      },

      toManualSetUp() {
        // this.$router.push({
        //   path: "/visControl/manualSetUp",
        //   query: {}
        // })
      },

      toManualSetUp2() {
        // this.$router.push({
        //   path: "/visControl/manualSetUp2",
        //   query: {}
        // })
      },

      refresh() {
        this.searchModel = {
          deviceName: "",
          deviceCode: ""
        }
        this.getTableList()
      }
    }
  }
</script>
<style scoped lang="scss">
  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .title-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;

    .search-content {
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }
</style>
